<template>
    <div class="goodsinfo">
        <div class="goods_swipe">
            <van-icon name="arrow-left" class="left"/>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>
            <div class="good_price">
                <span class="price">￥49.50</span>
                <span class="goods">健达牛奶巧克力84克意大利进口儿童糖果 健达迷你巧克力 （14颗）装</span>
                <span class="suggest">健达牛奶巧克力84g*1袋装，永辉、沃尔玛、家乐福人人乐、同款销售！</span>
            </div>
            <div class="item-floor">
                <van-cell title="优惠" @click="myClick" center>
                    <div>满一元即返茗茶169减30/399减60优惠券</div>
                    <div>满一元即返茗茶169减30/399减60优惠券</div>
                    <template #right-icon>
                        <van-icon name="weapp-nav" />
                    </template>
                </van-cell>
                <van-action-sheet v-model="show" title="标题">
                    <div class="content">内容</div>
                </van-action-sheet>
            </div>
            <div class="item-floor">
                <van-cell title="规格" @click="myClick2" center>
                    <div>健达迷你巧克力，（14颗）装，1个</div>
                    <template #right-icon>
                        <van-icon name="weapp-nav" />
                    </template>
                </van-cell>
                <van-action-sheet v-model="isShow" title="标题">
                    <div class="content">标题</div>
                </van-action-sheet>
            </div>
            <div class="item-floor">
                <van-tabs v-model="active">
                    <van-tab title="商品介绍">
                        <div v-for="item in gInfo">
                            <p v-html="item.goods_content" class="goods_content"></p>
                        </div>
                    </van-tab>
                    <van-tab title="规格参数">内容 2</van-tab>
                </van-tabs>
            </div>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
            <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
            <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
        </van-goods-action>
    </div>
</template>

<script>
  import Vue from 'vue';
  import { Swipe, SwipeItem,GoodsAction, GoodsActionIcon, GoodsActionButton,Toast,Cell, CellGroup,Icon,ActionSheet,Tab, Tabs} from 'vant';
  import {post} from "../network/request";
  Vue.use(Swipe).use(SwipeItem).use(GoodsAction).use(GoodsActionButton).use(GoodsActionIcon).use(Toast).use(Cell).use(CellGroup).use(Icon).use(ActionSheet).use(Tab).use(Tabs)
  export default {
    name: "Goodsinfo",
    data(){
      return{
        show:false,
        isShow:false,
        active:0,
        gInfo:[]
      }
    },
    methods: {
      onClickIcon() {
        Toast('点击图标');
      },
      onClickButton() {
        Toast('点击按钮');
      },
      myClick(){
        this.show = true
      },
      myClick2(){
        this.isShow = true
      },
      getGoodsInfo(){
        let id = this.$route.params.id
        let params = {'id':id}
        post('/index/index/getGoodsInfo',params).then(res =>{
          this.gInfo.push(res.data)
        })
      }
    },
    created(){
      this.getGoodsInfo()
    },
    filters:{
      htmlRestore(str){
        var s = "";
        if (str.length === 0) {
          return "";
        }
        s = str.replace(/&amp;/g, "&");
        s = s.replace(/&lt;/g, "<");
        s = s.replace(/&gt;/g, ">");
        s = s.replace(/&nbsp;/g, " ");
        s = s.replace(/&#39;/g, "\'");
        s = s.replace(/&quot;/g, "\"");
        return s;
      }
    }
  }
</script>

<style scoped>
    .left{
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 100;
        background-color: #666666;
        color: #FFFFFF;
        border-radius: 50%;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 320px;
        text-align: center;
        background-color: #39a9ed;
    }
    .good_price{
        background: #fff;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    .price{
        padding: 0 18px 0 18px;
        font-size: 25px;
        color: red;
    }
    .goods{
        padding: 0 18px 10px 18px;
        font-size: 16px;
        display: inline-block;
        font-weight: 700;
        line-height: 21px;
    }
    .suggest{
        display: inline-block;
        font-size: 12px;
        color: #999;
        padding: 0 18px 0 18px;
        height: 30px;
        max-height: 46px;
        line-height: 15px;
    }
    .van-goods-action{
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
    }
    .item-floor{
        margin-top: 15px;
        border-radius: 12px;
        background-color: #fff;
        overflow: hidden;
    }
    .van-cell__value{
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
        text-align: left;
    }
    .van-cell__title{
        position: relative;
        flex: 0.2;
    }
    .van-cell{
        border-radius: 12px;
    }
    .content {
        padding: 16px 16px 160px;
    }
    .van-nav-bar{
        background-color: rgba(0,0,0,0);
    }
    .van-nav-bar div{
        background-color: rgba(0,0,0,0);
    }
    .goods_content{
        margin: 10px 18px 0 18px;
    }
</style>
